<template lang="pug">
.left
  el-menu(class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" :collapse="close" router)
    el-menu-item(:index="d.path" v-for='d in NChildred' :key="d.path")
      i(:class="d.icon")
      span(slot="title") {{d.name}}
    el-submenu(v-for='item in YChildred' :index="item.path" :key='item.path')
      template(slot="title")
        i(:class="item.icon")
        span(slot="title") {{item.name}}
      el-menu-item(:index="d.path" v-for='d in item.children')
        i(:class="d.icon")
        span(slot="title") {{d.name}}
</template>
<script>
export default {
  props:['close'],
  data() {
    return {
      list:[{
        name:"首页",
        path:'/main',
        icon:'el-icon-setting'
      },{
        name:"系统管理",
        path:'/main/admin',
        icon:'el-icon-setting',
        children: [
          {
            name:"角色管理",
            path:'/main/role',
            icon:'el-icon-setting',
            p: ['admin.role.read']
          },
          {
            name:"用户管理",
            path:'/main/administrators',
            icon:'el-icon-setting',
            p: ['admin.user.read']
          }
        ]
      },{
        name:"商品管理",
        path:'/main/shop',
        icon:'el-icon-setting',
        children: [
          {
            name:"分类管理",
            path:'/main/shopList',
            icon:'el-icon-setting',
            p: ['shop.category.read']
          },
          {
            name:"产品管理",
            path:'/main/product',
            icon:'el-icon-setting',
            p: ['shop.product.read']
          },
          {
            name:"上架下架",
            path:'/main/sale',
            icon:'el-icon-setting',
            p: ['shop.sale.read']
          },
        ]
      },{
        name:"订单管理",
        path:'/main/order',
        icon:'el-icon-setting',
        children:[
          {
            name:"备餐配餐",
            path:'/main/current',
            icon:'el-icon-setting',
            p: ['sale.order.current']
          },
          {
            name:"历史订单",
            path:'/main/history',
            icon:'el-icon-setting',
            p: ['sale.order.history']
          }
        ]
      }],
      filterList:[],
    }
  },
    computed: {
    YChildred() {
      return this.filterList.filter(item=> item.children);
    },
    NChildred() {
      return this.filterList.filter(item=> !item.children);
    },
  },
  watch: {
    '$store.state.item':{
      deep: true,
      handler(item) {
        console.log(1111);
        localStorage.setItem('per',JSON.stringify(item.permissions))
        this.$nextTick(() => {
          this.data()
        })
      }
    }
 },
  methods: {
    data() {
      this.$nextTick(() => {
        console.log('data');
        const per = JSON.parse(localStorage.getItem('per'))
        console.log(per);
        this.list.filter(item=> {
          if(!item.children) {
            this.filterList.push(item)
          }else {
            console.log(item);
            let a = item.children.filter(i => per.includes(i.p.toString()));
            console.log(a);
            this.filterList.push({
              name:item.name,
              path:item.path,
              icon:item.icon,
              children:a
            });
          }
          console.log(this.filterList);
        })
      })

    }
  },
}
</script>
<style lang="sass">
.left
  min-height: 500px
  display: block
  background-color:#545c64
  .el-menu-vertical-demo:not(.el-menu--collapse)
    width: 250px
    min-height: 400px
</style>
